<template>
	<cu-refresh @loadmore="handleMore" @refresh="handleRefresh" :load="props.load" :height="props.height">
		<template v-slot:list>
			<view v-if="list && list.length > 0" class="cu-card case margin-top-sm"
				:class="props.isCard ? 'no-card' : ''">
				<view v-for="(item, index) in list" :key="index" class="cu-item shadow" @click="handleSelect(item,0)">
					<view class="weightNotes bg-white  align-center">
						<view class="content">
							<view class="flex justify-between align-center padding-sm">
								<view>
									<text class="cuIcon-list text-bold"></text>
									<text
										class="text-size-16 text-black margin-left-xs">{{ item.orderCode ? item.orderCode : '暂无' }}</text>
								</view>
								<view class="flex align-center">
									<view class="text-gray text-size-14">{{ getStatus(item.state) }}</view>
									<view class="text-gray cuIcon-right margin-left-sm"></view>
								</view>
							</view>
							<view class="cu-line"></view>
							<view class="padding-sm">
								<view class="flex justify-content-between">
								<view class="flex padding-bottom-xs  align-center">
									<view class="text-size-30">服务号</view>
									<view class="text-size-50 text-bold text-menu-color margin-left-sm">{{item.serialNum}}</view>
								</view>
								<view class="d-flex align-items-center ml-20">
									<image @click.stop="handleCall(item)" src="/static/images/order/icon_phone.png" class="phone-icon">
									</image>
									<image @click.stop="handleLocation(item)" src="/static/images/order/icon_map.png" class="map-icon">
									</image>
								</view>
								</view>
							<!-- 	<view class="flex padding-bottom-sm  align-center">
									<view class="cu-avatar-group">
										<view class="cu-avatar round lg" v-for="(item2, index2) in item.goodsList"
											:key="index2" :style="[{ backgroundImage: 'url(' + item2.coverUrl + ')' }]">
										</view>
									</view>
								</view> -->

								<view class="flex justify-content-between  align-center ">
									<view class="text-gray text-size-12 margin-left-xs">
										{{ item.buyTime ? item.buyTime : '暂无' }}
									</view>
									<view class="text-gray text-size-12">
										<text
											class="margin-right-sm">共{{ item.goodsList ? item.goodsList.length : 0 }}份</text>
										<text class="text-size-16 text-bold  text-black">￥{{ item.price }}</text>
									</view>
								</view>
								<view 
									class="flex justify-content-between align-center margin-top-xs">
									<view class="text-gray flex">
										<view class="size-44 cuIcon-locationfill text-orange"></view>
										<view class="margin-left-xs">
											<view class="text-size-16 text-black text-bold">{{ item.housingEstateName}}</view>
											<view class="text-size-14 text-gray ">{{ item.accountAddress}}</view>
										</view>
									</view>
									<view class="flex align-center">
										<button @click.stop="handleSelect(item,1)" v-if="item.state==3"
											class="cu-btn round  bg-menu">开始服务</button>
										<button @click.stop="handleSelect(item,2)" v-if="item.state==8"
											class="cu-btn round  bg-menu">服务完成</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</cu-refresh>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import { useSettingStore } from '@/stores/index';
	import cuRefresh from '@/components/cu-refresh.vue';
	const setting = useSettingStore();
	const emit = defineEmits(['action', 'loadmore', 'refresh']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		list: {
			default: function () {
				return [
					{
						buyTime: '',
						goodsList: [
							{
								coverUrl: 'http://www.hblue.top:48099/img/2023-02-27/c1ea13ab7ee240b4abeb6675da7924e2.jpeg',
								createTime: '2023-03-13 05:23:56',
								foodPrice: null,
								goodsTypeId: null,
								goodsTypeName: null,
								id: 26,
								name: '干锅排骨',
								num: 1,
								price: 10,
								processPrice: null,
								remark: null,
								sort: null,
								weight: 900
							}
						],
						id: 0,
						orderCode: '',
						price: 0,
						shopName: '',
						state: 0,
						serialNum: ''
					}
				];
			}
		},
		height: {
			type: String,
			default: '80vh'
		},
		load: {
			type: [Boolean, String],
			default: true
		}
	});
	const avatar = [
		'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
		'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
		'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
		'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg'
	];
	const statusList = [
		{
			id: 0,
			name: '待支付'
		},
		{
			id: 2,
			name: '支付失败'
		},
		{
			id: 3,
			name: '待服务'
		},
		{
			id: 4,
			name: '已退款'
		},
		{
			id: 5,
			name: '已取消'
		},
		{
			id: 6,
			name: '配餐中'
		},
		{
			id: 7,
			name: '已接单'
		},
		{
			id: 8,
			name: '服务中'
		},
		{
			id: 9,
			name: '服务完成'
		},
		{
			id: 10,
			name: '签收'
		},
		{
			id: 11,
			name: '评价'
		}
	];
	const handleRefresh = (e : any) => {
		emit('refresh');
	};
	const handleMore = (e : any) => {
		emit('loadmore');
	};
	const handleSelect = (value : any, type : any) => {
		emit('action', value, type);
	};
	const handleCall = (order:any) => {
		if (order.accountPhone && order.accountPhone.length > 0) {
			uni.makePhoneCall({
				phoneNumber: order.accountPhone
			});
		} else {
			uni.showToast({
				title: '暂无手机号'
			})
		}
	};
	const handleLocation = (order:any) => {
		uni.openLocation({
			latitude: parseFloat(order.clientLat),
			longitude: parseFloat(order.clientLon),
			success: ()=> {
				console.log('success');
			}
		});
	};
	const getStatus = (e : number) => {
		const item = statusList.find(obj => {
			return obj.id == e;
		});
		if (item) {
			return item.name;
		} else {
			return '未知';
		}
	};
	const roleInfo = ref({
		label: '管理员',
		value: 'admin',
		path: '/manage/index/manager'
	})
	onMounted(() => {
		uni.getStorage({
			key: 'role',
			success: function (res) {
				console.log(res.data);
				if (res.data) {
					let info = setting.routerList.find((obj : any) => obj.value == res.data);
					if (info) {
						roleInfo.value = info
					}
				}
			}
		});
	})
</script>

<style>
	.cu-item {
		margin-top: 0;
		border: 1px solid #efefef;
	}

	.cu-card>.cu-item {
		display: block;
		background-color: #ffffff;
		overflow: hidden;
		border-radius: 10rpx;
		margin: 0rpx 30rpx 30rpx 30rpx;
		box-shadow: 0px 2px 4px 0px rgba(200, 200, 200, 0.5), 0px 2px 4px 0px rgba(200, 200, 200, 0.5);
		border-radius: 8px;
	}
	.phone-icon,
	.map-icon {
		width: 64rpx;
		height: 64rpx;
	}
	
	.phone-icon {
		margin-right: 40rpx;
	}
	
</style>